<template>
    <div :class="{rightContent:true,width:show}">

        <div class="top">
            <div class="btn">
                <i v-if="show" class="el-icon-s-fold" @click="ShowAndHidden"></i>
                <i v-else class="el-icon-s-unfold" @click="ShowAndHidden"></i>
                <el-breadcrumb separator="/" v-if="content==null">
                    <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
                    <a href="###" style="color: rgb(96, 98, 102)">{{title}}</a>
                </el-breadcrumb>
                <el-breadcrumb separator="/" v-else>
                    <el-breadcrumb-item :to="{ path: '/xiaoqu' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="###">{{title}}</a></el-breadcrumb-item>
                    <el-breadcrumb-item>{{content}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="height: 30px">
            </div>
            <div class="fenjiexian" >
            </div>
        </div>
        <div class="bottom">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RightContentView",
        data() {
            return {
                show: false,
            }
        },
        props: ["title", "content"],
        methods: {
            ShowAndHidden() {
                this.show = !this.show;
                this.$emit("sendShow", this.show);
            },
        },
        created() {

        }
    }
</script>

<style scoped>
    .width {
        margin-left: 65px !important;
    }

    .rightContent {
        /*padding-left: 15px;*/
        /*background-color: yellow;*/
        /*height: 1000px;*/
        margin-left: 230px;
        transition: .5s;
    }

    .top {
        height: 100px;
        background-color: white;
    }

    .btn {
        height: 50px;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    }

    .btn > i {
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        float: left;
    }

    .fenjiexian {
        height: 6px;
        /*background-color: yellowgreen;*/
        box-shadow: 0 2px  3px rgba(0, 21, 41, .2);
    }

    .el-breadcrumb {
        line-height: 50px;
    }

    @media only screen and (max-width: 1200px) {
        .rightContent {
            margin-left: 0 !important;
        }

    }
</style>